<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <!-- <FormItem
                type="remoteSelect"
                prop="parentId"
                label="上级菜单"
                v-model="baTable.form.items!.parentId"
                placeholder="请选择"
                :input-attr="{
                  params: { isTree: true },
                  field: 'menuName',
                  'remote-url': baTable.api.actionUrl.get('list'),
                }"
              /> -->
          <el-form-item label="父级物料编码" prop="parentCode">
            <el-input
              v-model="baTable.form.items!.parentCode"
              placeholder="请输入工作中心代码"
              disabled
            />
          </el-form-item>
          <el-form-item label="物料编码" prop="materialCode">
            <el-input
              v-model="baTable.form.items!.materialCode"
              placeholder="请输入工作中心代码"
            />
          </el-form-item>
          <FormItem
            label="物料类型"
            v-model="baTable.form.items!.materialType"
            type="radio"
            prop="materialType"
            :data="{
              content: { 成品: '成品', 自制件: '自制件' },
              childrenAttr: { border: true },
            }"
          />
          <!-- <el-form-item label="车间代码" prop="workshopCode">
            <el-input
              v-model="baTable.form.items!.workshopCode"
              placeholder="请输入工作中心代码"
            />
            <div class="block-help">工作中心代码</div>
          </el-form-item>
          <el-form-item label="车间名称" prop="workshopName">
            <el-input
              v-model="baTable.form.items!.workshopName"
              placeholder="请输入车间名称"
            />
            <div class="block-help">工作中心描述</div>
          </el-form-item> -->
          <el-form-item label="工作中心/车间信息" prop="workshopCode">
            <el-scrollbar
              ref="verticalMenusRef"
              class="vertical-menus-scrollbar"
              style="width: 100%"
            >
              <el-tree
                ref="treeRef"
                :default-checked-keys="
                  baTable.form.operate == 'edit'
                    ? [baTable.form.items.workshopCode]
                    : baTable.form.operate == 'add'
                    ? [baTable.form.items.workshopCode]
                    : []
                "
                class="tree-border"
                :data="state.stationOptions"
                :props="defaultProps"
                node-key="deptId"
                show-checkbox
                @check="handleCheckChange"
                :filter-node-method="filterNode"
              />
            </el-scrollbar>
          </el-form-item>
          <!-- <el-form-item label="工序号" prop="process">
            <el-input
              v-model="baTable.form.items!.process"
              placeholder="请输入工序号"
            />
          </el-form-item> -->
          <!-- <el-form-item prop="processName" label="工序名称">
            <el-input
              v-model="baTable.form.items!.processName"
              type="string"
              placeholder="请输入工序名称"
            ></el-input>
          </el-form-item> -->
          <el-form-item prop="perUsage" label="每用量">
            <el-input
              v-model="baTable.form.items!.perUsage"
              type="number"
              placeholder="请输入每用量"
            ></el-input>
            <div class="block-help">可自定义</div>
          </el-form-item>
          <el-form-item label="工序列表" prop="processName">
            <el-select
              v-model="baTable.form.items!.processName"
              placeholder="可自定义设备工序"
              @change="modelChange"
            >
              <el-option
                v-for="item in state.processOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <FormItem
            label="工序类型"
            v-model="baTable.form.items!.type"
            type="radio"
            prop="type"
            :data="{
              content: { 0: '人工', 1: '机加工' },
              childrenAttr: { border: true },
            }"
          />
          <el-form-item prop="prepareTime" label="准备时间(分钟)">
            <el-input
              v-model="baTable.form.items!.prepareTime"
              type="string"
              placeholder="请输入单件额定准备时间"
            ></el-input>
            <div class="block-help">单件额定准备时间</div>
          </el-form-item>

          <el-form-item prop="productTime" label="加工时间(分钟)">
            <el-input
              v-model="baTable.form.items!.productTime"
              type="string"
              placeholder="请输入单件额定加工时间"
            ></el-input>
            <div class="block-help">单件额定加工时间</div>
          </el-form-item>
          <el-form-item prop="afterTime" label="结束时间(分钟)">
            <el-input
              v-model="baTable.form.items!.afterTime"
              type="string"
              placeholder="请输入单件额定收尾时间"
            ></el-input>
            <div class="block-help">单件额定收尾时间</div>
          </el-form-item>
          <el-form-item prop="previousProcess" label="前道工序">
            <el-input
              v-model="baTable.form.items!.previousProcess"
              type="string"
              disabled
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;
const station = inject("station") as any;
const equipUnit = inject("equipUnit") as any;
const bom = inject("bom") as any;
const bomR = inject("bomR") as any;
const bomP = inject("bomP") as any;
const dept = inject("dept") as any;

const state: {
  typeOptions: any;
  stationOptions: any;
  processOptions: anyObj[];
  processIds: any;
} = reactive({
  typeOptions: [], //物料类型列表
  stationOptions: [], //工作中心列表
  processOptions: [], //工序列表
  processIds: 0,
});

const defaultProps = {
  children: "children",
  label: "deptName",
  value: "id",
};

// 关键词过滤
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.name.includes(value);
};
const handleCheckChange = (row: any, node: any) => {
  console.log("row", row, "node", node);
  if (node.checkedKeys.length == 0) {
    baTable.form.items!.workshopCode = "";
    baTable.form.items!.workshopName = "";
  } else {
    baTable.form.items!.workshopCode = row.deptId; //车间代码改存为部门id
    baTable.form.items!.workshopName = row.deptName;
  }
};

const rules = reactive<FormRules>({
  materialCode: [
    { required: true, message: "物料编码不能为空", trigger: "blur" },
  ],
  workshopCode: [
    { required: true, message: "车间代码不能为空", trigger: "blur" },
  ],
  workshopName: [
    { required: true, message: "车间名称不能为空", trigger: "blur" },
  ],
  process: [{ required: true, message: "工序号不能为空", trigger: "blur" }],
  processName: [
    { required: true, message: "工序名称不能为空", trigger: "blur" },
  ],
  prepareTime: [
    { required: true, message: "准备时间不能为空", trigger: "blur" },
  ],
  equipmentName: [
    { required: true, message: "设备名称不能为空", trigger: "blur" },
  ],
  productTime: [
    { required: true, message: "加工时间不能为空", trigger: "blur" },
  ],
  afterTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
  type: [{ required: true, message: "工序类型不能为空", trigger: "blur" }],
  perUsage: [{ required: true, message: "每用量不能为空", trigger: "blur" }],
  materialType: [
    { required: true, message: "物料类型不能为空", trigger: "blur" },
  ],
});

//工序选择
const modelChange = (val: any) => {
  console.log("类型", val);
  baTable.form.items!.processId = val.id;
  baTable.form.items!.type = val.type;
  baTable.form.items!.processName = val.name;
  baTable.form.items!.prepareTime = val.prepareTime;
  baTable.form.items!.productTime = val.productTime;
  baTable.form.items!.afterTime = val.afterTime;
};

onMounted(() => {
  //获取工作中心数据
  // station.getStationByRole().then((res: any) => {
  //   state.stationOptions = res;
  //   console.log("stationOptions", res);
  // });
  dept.getDeptOrigin().then((res: any) => {
    state.stationOptions = res;
    console.log("stationOptions", res);
  });
  //获取工序列表
  bomP
    .getRouteList({ pageSize: 10000 })
    .then((res: any) => {
      console.log("获取工序列表", res);
      state.processOptions = res.rows;
    })
    .catch((err: any) => {});
  setTimeout(() => {
    baTable.form.items!.code = equipUnit.stationInfo.id;
    baTable.form.items!.name = equipUnit.stationInfo.label;
  });
  //   baTable.form.items!.id = equipUnit.stationInfo.id;
  setTimeout(() => {
    baTable.form.items!.materialCode = bom.bomInfo.code; //本级物料编码
    baTable.form.items!.materialType = bom.bomInfo.type;
    baTable.form.items!.name = bom.bomInfo.name;
    baTable.form.items!.perUsage = bom.bomInfo.perUsage;
    baTable.form.items!.workshopCode = bom.bomInfo.workshopCode;
    baTable.form.items!.workshopName = bom.bomInfo.workshopName;
    baTable.form.items!.parentCode =
      JSON.stringify(bomR.bomTreeParent) === "{}" ? 0 : bomR.bomTreeParent.code; //父级物料编码
    console.log("查看父级", bomR.bomTreeParent);
  });
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
.tree-border {
  width: 100%;
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  // background: #fff none;
  border-radius: 4px;
}
</style>
